<template>
	<view class="goods-detail-page">
		<view class="goods-detail">
			<!-- <view class="logo-wrap" :style="{ backgroundImage: 'url(' + logoBanner + ')'}"> -->
			<view class="logo-wrap">
				<image class="logo" :src="logoBanner" mode="widthFix"></image>
				<view id="titlename" class="goods-no" :style="{ color: dynamicColor }">
				{{ goodsData.name }}
				</view>
				<view class="goods-center">
					<!-- <image class="goods-cover" mode="widthFix" v-if="!showError" @error="showError = true" :src="'https://fullhouse.qinyuan.cn/' + goodsData.image"></image>
					<image class="goods-cover" mode="widthFix" v-if="showError" src="/static/img-error.png"></image> -->
					<!-- <view class="piclist">
						<u-swiper v-if="goodsData.images" :list="goodsData.images"  @click="lookImage(prevIndex)" @change="changeIndex" img-mode="heightFix" height="360" :autoplay="false" ></u-swiper>
					</view> -->
					<view class="piclist">
					    <u-swiper v-if="goodsData.images && goodsData.images.length > 1" :list="goodsData.images" @click="lookImage(prevIndex)" @change="changeIndex" img-mode="heightFix" height="" :autoplay="false"></u-swiper>
					    <image v-else-if="goodsData.images && goodsData.images.length === 1" :src="goodsData.images[0]" mode="heightFix" style="width:100%;height:360rpx;"></image>
					</view>
					
					<view class="goods-feature">
						<!-- <view class="feature">{{ goodsData.description }}</view> -->
							<rich-text :nodes="getHtml(goodsData.description)" class="feature"></rich-text>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-title" :style="{ color: canshucColor }" >产品参数</view>
				<view class="params-list">
					<view class="params-item" v-for="item in features">
						<view class="params-label" :style="{ color: canshucColor }" >{{ item.label }}</view>
						<view class="params-value" :style="item.style || {}"> 
							<rich-text :nodes="getHtml(item.value)"></rich-text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="card">
			 <view class="hr"></view>
			<view class="card-title">产品详情</view>
			<view class="rich-content">
				<rich-text :nodes="getHtml(goodsData.particulars)"></rich-text>
				<!-- <rich-text nodes="<p><img src='https://fullhouse.qinyuan.cn/uploads/20230526/0168aea3b4cbecc8407f7c2a2c91ee5b.jpg' alt='Image 2' /></p>"></rich-text> -->
				<!-- <image class="src" :src="goodsData.particulars" mode="widthFix"></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	import uSwiper from '/components/u-swiper/u-swiper.vue'
	import request from '/common/request.js'

	export default {
		components: {
			uSwiper
		},
		onShareAppMessage() {
					return {
						title: '产品详情',
						imageUrl: "",
						path: "/pages/goods-detail/goods-detail?id="+this.goodsId
					}
				},
		data() {
			return {
				showLogoBanner2: false,
				showError: false,
				goodsId: '',
				features: [],
				prevIndex: 0,
				canshucColor: '',
				dynamicColor: '',
				logoBanner:"/static/arcbg.png",
				goodsData: {
				}
			}
		},
		onLoad(options) {
			const { id } = options
			if (id) {
				this.goodsId = id
				this.getDetail()
				this.getImagePath()
			}
			console.log("进入了商品")
			// console.log(this.goodsId)
		},
		methods: {
			changeIndex(index) {
				this.prevIndex = index;
			},
			getImagePath() {
				request({
					url: '/category/imgbanner?id='+this.goodsId,
				}).then(res => {
					console.log("logo banner: ", res)
					if(res){
						this.logoBanner=res;
						if(this.logoBanner==="/static/arcbg1.jpg"){
							this.showLogoBanner2 = true
							this.dynamicColor="aliceblue";
							this.canshucColor="#002855";
						}
					}
				})
			    },
			lookImage(index) {
				uni.previewImage({
					current: index,
					urls: this.goodsData.images,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log(data)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getHtml(str) {
				if (!str) return ''
				let domain = 'https://fh4.qinyuan.cn';
				// let domain = 'http://zhs.75shop.xyz:8081';
				// /
				let newHtmlStr = str.replace(/src="\/uploads/g, `src="${domain}/uploads`);
				var newContent = newHtmlStr.replace(/<img[^>]*>/gi, (match) => {
				  let processed=null;
				  if(!match.match(/style=\"(.*)\"/gi)){
					processed=match.replace(/\<img/g, '<img style="width:100%;height:auto;display:block"');
				  }else{
					processed = match.replace(/style=\"(.*)\"/gi, 'style="width:100%;height:auto;display:block"');
				  }
				  return processed;
				});
				return newContent;
				// return newHtmlStr
			},
			getFeatures(str) {
				if (!str) return []
				return str.split(',').map(e => {
					const arr =  e.split(':')
					return {
						label: (arr[0] || '-').trim(),
						value: (arr[1] || '-').trim(),
						style: arr[0] && arr[0].includes('产品尺寸') ? {
							"white-space": "nowrap",
							"max-width": "none",
							"margin": 0
						} : null
					}
				})
			},
			getDetail() {
				request({
					url: '/category/products?id='+this.goodsId,
					// params: {
					// 	id: this.goodsId
					// }
				}).then(res => {
					if (!res || !res.length) return
					this.goodsData = res[0]
					this.features = this.getFeatures(this.goodsData.attributes)
						
						console.log("features: ", this.features)
					if (this.goodsData.image) {
						const host = 'https://fh4.qinyuan.cn'
						if (Array.isArray(this.goodsData.image)) {
							this.goodsData.images = this.goodsData.image.map(e => host + e)
						} else {
							this.goodsData.images = [this.goodsData.image, this.goodsData.image].map(e => host + e)
						}
					}
					// console.log(this.goodsData.images)
					// console.log(this.features)
				})
			}
		}
	}
</script>

<style lang="scss">
	.profont{
		font-size: 12px;
	}
	.hr {
		width: 80%;
		height: 2px; 
		background-color: transparent;
		margin: 10px auto; 	
	  }
	.piclist {
		width: 300rpx;
		
		image {
			width: 100% !important;
		}
	}
	page {
		// min-height: 100vh;
		height: 100%;
	}
	.rich-content {
		div,
		view,
		p, 
		uni-view,
		img {
			display: block;
			max-width: 100%;
		}
	}

	.goods-detail-page {
		background-color: #f2f2f2;
	}

	.goods-detail {
	}
	
	.logo-wrap {
		position: relative;
		min-height: 100vw;
		background-color: #fff;
		// background-size: 100% auto;
		// background-repeat: no-repeat;
		// background-image: url("/static/arcbg.png");
		// background-image: url("../../static/arcbg1.jpg");
		&.banner2 {
			// background-image: url("/static/arcbg1.jpg");
		}
		.logo {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;
		}
		.goods-no {
			// position: absolute;
			position: relative;
			text-align: center;
			z-index: 10;
			padding-top: 30rpx;
			color: #2863bb;
			font-size: 18px;
		}
	
		.goods-center {
			// position: absolute;
			position: relative;
			z-index: 10;
			padding-top: 150rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// padding: 0 60rpx;
			// padding-left: 100rpx;
			padding-left: 10rpx;
			// padding-right: 100rpx;
			padding-right: 10rpx;

			.goods-cover {
				width: 160rpx;
				height: 320rpx;
			}
			.goods-feature {
				flex: 1;
				padding-left: 16rpx;
				width: fit-content;
				color: #2863bb;
				font-size: 14px;
				line-height: 1.75;
				
				.feature {
				}
			}
		}
	}

	.card {
		background-color: #fff;
		.card-title {
				font-weight: bold;
			    font-size: 20px;
			    text-align: center;
			    padding: 0.625rem 0;
		}
	}
		
	.params-list {
		display: flex;
		flex-wrap: wrap;
	}

	.params-item {
		 width: 33%;
		 display: inline-block;
		 text-align: center;
		 color: #009bde;
		 // #303133
		 font-weight: bold;
		 font-size: 14px;
		 padding: 1rem 0;

		.params-label {
			padding-bottom: 10rpx;
		}
		.params-value {
			padding-top: 20rpx;
			font-family: Arial, sans-serif;
			font-weight: 500;
			color: #303133;
			// max-width: 200rpx;
			max-width: auto;
			word-break: break-word;
			margin: 0 auto;
		}
	}
	
</style>
